<template>
  <div style="position: relative; background: white;">
    <!-- 地图 -->
    <div id="container2" class="mapLoc"></div>

    <div class="dispath_shuax">
      <font>{{time}}</font>&nbsp;秒后刷新
    </div>

    <!-- 地图信息框 -->
    <mapCarinfo ref="carinfo" :car="carInfo" :operate="false" />
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import mapCarinfo from './mapCarinfo'

import {GD_KEY} from '@/common/config'
import '@@/css/dispatch.css'
import car0 from '@@/images/car_green.png'
import car1 from '@@/images/car_red.png'
import car3 from '@@/images/car_off.png'
import car4 from '@@/images/car_yellow.png'

import {queryGpsooOrderTruckInfo} from '@/api/landCenter'

const carIcons = [car0, car1, null, car3, car4] // 0:正常数据 green 3:设备离线 off 4:设备静止 yellow

export default {
  name: 'track-info',
  props: {
    type: {
      type: Number,
      default: 2
    }, // 1订单详情 2车辆追踪
    id: Number
  },
  data () {
    return {
      GD_KEY,
      carInfo: {},
      time: 10,
      timeout: null,
      map: null,
      AMap: null,
      infoWindow: null
    }
  },
  components: {
    mapCarinfo
  },
  methods: {
    setCarInfo (info) {
      this.carInfo = {...info}
      this.infoWindow.setContent(this.$refs.carinfo.$el)
      if (info.gpsooInfo) {
        this.map.setCenter(new this.AMap.LngLat(info.gpsooInfo.lng, info.gpsooInfo.lat))
        this.infoWindow.open(this.map, new this.AMap.LngLat(info.gpsooInfo.lng, info.gpsooInfo.lat))
      }
    },
    initPositionOfCar (item) {
      this.map.clearMap()
      const marker = new this.AMap.Marker({
        position: new this.AMap.LngLat(item.gpsooInfo.lng, item.gpsooInfo.lat),
        icon: carIcons[item.gpsooInfo.device_info_new], // 0:正常数据 3:设备离线 4:设备静止
        offset: new this.AMap.Pixel(-33, -64),
        title: `${item.tractorNumber} ${item.trailerNumber ? item.trailerNumber : ''}`
      })
      this.map.add(marker)

      this.setCarInfo(item)
    },
    initTrack () {
      let data = {}
      if (this.type === 1) {
        data = {
          type: 1,
          orderTruckId: this.id
        }
      } else if (this.type === 2) {
        data = {
          type: 2,
          tractorId: this.id
        }
      }
      queryGpsooOrderTruckInfo(data).then(rsp => {
        if (this.map) {
          this.initPositionOfCar(rsp.data)
        } else {
          AMapLoader.load({
            'key': this.GD_KEY,
            'version': '2.0',
            'plugins': ['AMap.Geocoder']
          }).then((AMap) => {
            this.map = new AMap.Map('container2')
            this.infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -60), isCustom: true})
            this.AMap = AMap

            this.initPositionOfCar(rsp.data)
          }).catch(e => {
            // console.log(e)
          })
        }
      })
    },
    initTimeout () {
      if (this.time === 0) {
        this.initTrack()
        this.time = 10
      } else {
        this.time--
      }
      this.timeout = window.setTimeout(this.initTimeout, 1000)
    }
  },
  mounted () {
    if (this.id) {
      this.initTrack()
      this.initTimeout() // 开启循环
    }
  },
  beforeDestroy () {
    if (this.timeout) {
      clearTimeout(this.timeout)
    }
  }
}
</script>

<style lang="less" scoped>
.mapLoc {
  width: 100%;
  height: 540px;
}
</style>
